import React, { Component } from 'react'
// 受控组件
// 表单的值受state 数据的控制, state 数据变化, 则表单数据变化

export default class Father extends Component {
    state = {
        username: '花和尚-鲁智深',
        sex: '男',
        sel: '抽烟',
        checkboxArr: ['高', '帅']
    }
    render() {
        const { username, sex, sel, checkboxArr } = this.state
        return (
            <div>
                {/* 输入框 */}
                <p>
                    <input type='text' name='username' value={username} onChange={this.editFn.bind(this, 'username')} />
                </p>
                {/* 单选框 */}
                <p>
                    <input
                        type='radio'
                        name='sex'
                        checked={sex == '男'}
                        value='男'
                        onChange={this.editFn.bind(this, 'sex')}
                    /> 男
                    <input
                        type='radio'
                        name='sex'
                        checked={sex == '女'}
                        value='女'
                        onChange={this.editFn.bind(this, 'sex')}
                    /> 女
                </p>
                {/* 下拉框 */}
                <p>
                    <select value={sel} name='sel' onChange={this.editFn.bind(this, 'sel')}>
                        <option value='喝酒'>喝酒</option>
                        <option value='抽烟'>抽烟</option>
                        <option value='烫头'>烫头</option>
                    </select>
                </p>
                {/* 复选框 */}
                <p>
                    <input
                        type='checkbox'
                        value='帅'
                        checked={checkboxArr.includes('帅')}
                        onChange={this.editFn.bind(this, 'checkboxArr')}
                    /> 帅
                    <input
                        type='checkbox'
                        value='富'
                        checked={checkboxArr.includes('富')}
                        onChange={this.editFn.bind(this, 'checkboxArr')}
                    /> 富
                    <input
                        type='checkbox'
                        value='高'
                        checked={checkboxArr.includes('高')}
                        onChange={this.editFn.bind(this, 'checkboxArr')}
                    /> 高
                </p>
            </div>
        )
    }

    editFn(key, e) {
        // console.log(key, e);
        //console.log(e.target.name);
        if (key == 'checkboxArr') {
            // 修改的事复选框,应该对数组  checkboxArr: ['高', '帅'] 进行增删操作
            // 判断当前 checkboxArr数组中是否包含e.target.value
            //console.log(e.target.value);
            if (this.state.checkboxArr.includes(e.target.value)) {
                // 将当前数组中包含这项的值删掉
                let newArr = this.state.checkboxArr.filter(item => item != e.target.value)
                //console.log('newArr', newArr);
                this.setState({
                    checkboxArr: newArr
                })
            } else {
                this.state.checkboxArr.push(e.target.value)
                this.setState({
                    checkboxArr: this.state.checkboxArr
                })
            }
        } else {
            this.setState({
                [key]: e.target.value
            })
        }


    }
}
